{extend name="pc/common/_base" /}

{block name="title"}
<title>Unix时间戳在线转换工具-{$website['title']}</title>
{/block}

{block name="keywords"}
<meta name="keywords" content="Unix时间戳在线转换,时间戳转换工具,{$website['title']}">
{/block}

{block name="description"}
<meta name="description" content="{$website['title']}Unix时间戳转换，可以把Unix时间转成北京时间。">
{/block}

{block name="style"}
<style>
    .content-box {
        width: 100%;
        margin-top: 50px;
    }

    .curtimebox {
        width: 100%;
        margin: 0 auto 24px;
        height: 73px;
        display: flex;
        justify-content: center;
    }

    .curtimelf, #curtimert {
        float: left;
        flex: 1;
        height: 72px;
        background-color: #fff;
        border-bottom: 1px solid #f5f7fa;
        color: #565656;
        font-size: 18px;
        line-height: 72px;
        padding-left: 36px;
        padding-right: 37px;
        width: 100%;
    }

    .curtimelf {
        margin-right: 2px;
        text-align: right;
        border-radius: 5px 0 0 5px;
    }

    .curtimertbox {
        position: relative;
        float: left;
        flex: 1;
    }

    #curtimert {
        text-align: left;
        border-radius: 0 5px 5px 0;
    }

    #stop {
        width: 14px;
        height: 14px;
        display: block;
        position: absolute;
        left: 170px;
        top: 28px;
        cursor: pointer;
    }

    /**/
    #cbresultlt {
        width: 100%;
        margin: 30px auto;
        height: 216px;
        background-color: #ffffff;

    }

    #cbresultlt ul li {
        float: left;
        height: 72px;
        line-height: 72px;
        position: relative;
        border-bottom: 1px solid #f5f7fa;
    }

    #cbresultlt ul li p {
        float: left;
        width: 114px;
        text-align: center;
        font-size: 16px;
        color: #565656;
        border-right: 1px solid #f5f7fa;
        border-bottom: 1px solid #f5f7fa;
    }

    #cbresultlt ul li input {
        width: 363px;
        height: 68px;
        border: 2px solid #fff;
        float: left;
        outline: none;
        padding-left: 80px;
        font-size: 14px;
        color: #333;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;

        border-right: 1px solid #f5f7fa;
    }

    #cbresultlt ul .bjtime {
        background-color: #fff;
        border-right: 1px solid #f5f7fa;
    }

    #cbresultlt ul .bjtime label {
        float: left;
        margin: 0 6px;
    }

    #cbresultlt ul .bjtime input {
        width: 33px;
        height: 36px;
        border: 1px solid #e4e4e7;
        padding: 0;
        margin-top: 17px;
        font-size: 12px;
        text-align: center;
    }

    #cbresultlt ul .bjtime p {
        margin-right: 0;
        border-right: 1px solid #f5f7fa;
    }

    input::selection {
        background-color: #ddf5ff;
    }

    #cbresultlt ul li.conversion {
        width: 121px;
        background-color: #fff;
        margin-left: 1px;
        margin-right: 1px;
        border-right: 1px solid #f5f7fa;
    }

    #cbresultlt ul li.conversion button {
        width: 68px;
        height: 26px;
        background-color: #00b0fe;
        color: #fff;
        text-align: center;
        line-height: 26px;
        font-size: 14px;
        outline: none;
        border: none;
        cursor: pointer;
        margin: 23px auto;
        display: block;
        border-radius: 20px;
    }

    #cbresultlt ul li.showtime {
        border-right: none;
        border-bottom: none;
    }

    #cbresultlt ul li.showtime input {
        outline: none;
        width: 295px;
        display: block;
        height: 72px;
        border-right: none;
    }

    /*其他*/
    #toolPro {
        width: 100%;
        background-color: #f5f7fa;
        padding-top: 0;
        padding-bottom: 81px;
    }

    #toolPro .toolPro {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: 24px 25px;
        border: 1px solid #f5f7fa;
        margin-bottom: 60px;
        background-color: #fff;
    }

    #toolPro .toolPro strong {
        font-weight: normal;
        font-size: 18px;
        color: #00b0fe;
        margin-bottom: 13px;
        display: block;
        text-align: left;
    }

    #toolPro .toolPro p {
        text-align: justify;
        color: #838383;
        line-height: 26px;
    }

    #toolPro .toollist {
        width: 100%;
        margin: 0 auto;
    }

    #toolPro .toollist strong {
        color: #00b0fe;
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 28px;
        display: block;
        margin-top: 40px;
        text-align: left;
    }

    #toolPro table {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        border-bottom: 1px solid #99dfff;
        background-color: rgba(255, 255, 255, 0.8);
    }

    #toolPro .toollist table {
        border: none;
    }

    #toolPro .toollist table tr {
        border: none;
    }

    #toolPro .toollist table tr td {
        border: 1px solid #e9e9e9;
        height: 43px;
        line-height: 30px;
        color: #56688a;
        padding: 0 8px;
        text-align: left;
    }

    #toolPro .toollist table tr td:first-child {
        background-color: #f3f5f9;
        font-weight: bold;
        width: 222px;
    }

    #toolPro table tr td:nth-child(2n) {
        border-right: 1px solid #ade5ff;
    }
</style>
{/block}

{block name="main"}

<div class="editer">

    <div class="container">

        <h1 class="editer-title">UNIXTIME</h1>
        <p class="editer-info">Unix时间戳在线转换工具</p>

        <div class="content-box">

            <div id="app" v-cloak>
                <div class="curtimebox">
                    <div class="curtimelf">当前时间戳</div>
                    <div class="curtimertbox"><span id="curtimert">{{ currentUnixTime }}</span><span id="stop"></span></div>
                </div>
                <div id="cbresultlt">
                    <ul>
                        <li>
                            <p>时间戳</p><input type="text" v-model="setTimestamp">
                        </li>
                        <li class="conversion">
                            <button @click="change1()">转换</button>
                        </li>
                        <li class="showtime"><input type="text" readonly="readonly" v-model="getDateTimeStr"></li>

                        <li>
                            <p>时间01</p><input type="text" placeholder="（年/月/日 时:分:秒）" v-model="setTimeStr">
                        </li>
                        <li class="conversion">
                            <button @click="change2()">转换</button>
                        </li>
                        <li class="showtime"><input type="text" readonly="readonly" v-model="getTimestamp"></li>

                        <li class="bjtime">
                            <p>时间02</p><input style="margin-left:8px;" maxlength="4" type="text" v-model="currentYear"><label>年</label><input maxlength="2" type="text" v-model="currentMonth"><label>月</label><input maxlength="2" type="text" v-model="currentDay"><label>日</label><input maxlength="2" type="text" v-model="currentHour"><label>时</label><input maxlength="2" type="text" v-model="currentMinute"><label>分</label><input maxlength="2" type="text" v-model="currentSecond"><label>秒</label>
                        </li>
                        <li class="conversion">
                            <button @click="change3()">转换</button>
                        </li>
                        <li class="showtime"><input type="text" readonly="readonly" v-model="getTimestamp2"></li>
                    </ul>
                </div>
            </div>

            <div id="toolPro">
                <div class="toolPro">
                    <strong>工具介绍</strong>
                    <p>Unix时间戳(Unix timestamp)，或称Unix时间(Unix time)、POSIX时间(POSIX time)，是一种时间表示方式，定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数。Unix时间戳不仅被使用在Unix系统、类Unix系统中，也在许多其他操作系统中被广泛采用。</p>
                </div>
                <div class="toollist">
                    <strong>如何在不同编程语言中获取现在的Unix时间戳（Unix timestamp）</strong>
                    <table>
                        <tbody>
                        <tr>
                            <td>Java</td>
                            <td>time</td>
                        </tr>
                        <tr>
                            <td>JavaScript</td>
                            <td> Math.round(new Date().getTime()/1000)<br>
                                <span>getTime()返回数值的单位是毫秒</span></td>
                        </tr>
                        <tr>
                            <td>Microsoft .NET / C#</td>
                            <td>epoch = (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000</td>
                        </tr>
                        <tr>
                            <td>MySQL</td>
                            <td>SELECT unix_timestamp(now())</td>
                        </tr>
                        <tr>
                            <td>Perl</td>
                            <td>time</td>
                        </tr>
                        <tr>
                            <td>PHP</td>
                            <td>time()</td>
                        </tr>
                        <tr>
                            <td>PostgreSQL</td>
                            <td>SELECT extract(epoch FROM now())</td>
                        </tr>
                        <tr>
                            <td>Python</td>
                            <td><span>先</span> import time <span>然后</span> time.time()</td>
                        </tr>
                        <tr>
                            <td>Ruby</td>
                            <td><span>获取Unix时间戳：</span>Time.now <span>或</span> Time.new<br>
                                <span>显示Unix时间戳：</span>Time.now.to_i
                            </td>
                        </tr>
                        <tr>
                            <td>SQL Server</td>
                            <td>SELECT DATEDIFF(s, '1970-01-01 00:00:00', GETUTCDATE())</td>
                        </tr>
                        <tr>
                            <td>Unix / Linux</td>
                            <td>date +%s</td>
                        </tr>
                        <tr>
                            <td>VBScript / ASP</td>
                            <td>DateDiff("s", "01/01/1970 00:00:00", Now())</td>
                        </tr>
                        <tr>
                            <td> 其他操作系统<br>
                                <span>(如果Perl被安装在系统中)</span></td>
                            <td><span>命令行状态：</span>perl -e "print time"</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="toollist">
                    <strong>如何在不同编程语言中实现Unix时间戳（Unix timestamp)——普通时间</strong>
                    <table>
                        <tbody>
                        <tr>
                            <td>Java</td>
                            <td>String date = new java.text.SimpleDateFormat("dd/MM/yyyy HH:mm:ss").format(new java.util.Date(<u>Unix timestamp</u> * 1000))</td>
                        </tr>
                        <tr>
                            <td>JavaScript</td>
                            <td><span>先</span> let unixTimestamp = new Date(<u>Unix timestamp</u> * 1000) <span>然后</span> commonTime = unixTimestamp.toLocaleString()</td>
                        </tr>
                        <tr>
                            <td>Linux</td>
                            <td>date -d @<u>Unix timestamp</u></td>
                        </tr>
                        <tr>
                            <td>MySQL</td>
                            <td>from_unixtime(<u>Unix timestamp</u>)</td>
                        </tr>
                        <tr>
                            <td>Perl</td>
                            <td><span>先</span> my $time = <u>Unix timestamp</u> <span>然后</span> my ($sec, $min, $hour, $day, $month, $year) = (localtime($time))[0,1,2,3,4,5,6]</td>
                        </tr>
                        <tr>
                            <td>PHP</td>
                            <td>date('r', <u>Unix timestamp</u>)</td>
                        </tr>
                        <tr>
                            <td>PostgreSQL</td>
                            <td>SELECT TIMESTAMP WITH TIME ZONE 'epoch' + <u>Unix timestamp</u>) * INTERVAL '1 second';</td>
                        </tr>
                        <tr>
                            <td>Python</td>
                            <td><span>先</span> import time <span>然后</span> time.gmtime(<u>Unix timestamp</u>)</td>
                        </tr>
                        <tr>
                            <td>Ruby</td>
                            <td>Time.at(<u>Unix timestamp</u>)</td>
                        </tr>
                        <tr>
                            <td>SQL Server</td>
                            <td>DATEADD(s, <u>Unix timestamp</u>, '1970-01-01 00:00:00')</td>
                        </tr>
                        <tr>
                            <td>VBScript / ASP</td>
                            <td>DateAdd("s", <u>Unix timestamp</u>, "01/01/1970 00:00:00")</td>
                        </tr>
                        <tr>
                            <td> 其他操作系统<br>
                                <span>(如果Perl被安装在系统中)</span></td>
                            <td><span>命令行状态：</span>perl -e "print scalar(localtime(<u>Unix timestamp</u>))"</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="toollist">
                    <strong>如何在不同编程语言中实现普通时间——Unix时间戳（Unix timestamp)</strong>
                    <table>
                        <tbody>
                        <tr>
                            <td>Java</td>
                            <td>long epoch = new java.text.SimpleDateFormat("<u>dd/MM/yyyy HH:mm:ss</u>").parse("01/01/1970 01:00:00");</td>
                        </tr>
                        <tr>
                            <td>JavaScript</td>
                            <td>let commonTime = new Date(Date.UTC(<u>year</u>, <u>month</u> - 1, <u>day</u>, <u>hour</u>, <u>minute</u>, <u>second</u>))</td>
                        </tr>
                        <tr>
                            <td>MySQL</td>
                            <td> SELECT unix_timestamp(<u>time</u>)<br>
                                <span>时间格式: YYYY-MM-DD HH:MM:SS 或 YYMMDD 或 YYYYMMDD</span></td>
                        </tr>
                        <tr>
                            <td>Perl</td>
                            <td><span>先</span> use Time::Local <span>然后</span> my $time = timelocal($sec, $min, $hour, $day, $month, $year);</td>
                        </tr>
                        <tr>
                            <td>PHP</td>
                            <td>mktime(<u>hour</u>, <u>minute</u>, <u>second</u>, <u>month</u>, <u>day</u>, <u>year</u>)</td>
                        </tr>
                        <tr>
                            <td>PostgreSQL</td>
                            <td>SELECT extract(epoch FROM date('<u>YYYY-MM-DD HH:MM:SS</u>'));</td>
                        </tr>
                        <tr>
                            <td>Python</td>
                            <td><span>先</span> import time <span>然后</span> int(time.mktime(time.strptime('<u>YYYY-MM-DD HH:MM:SS</u>', '%Y-%m-%d %H:%M:%S')))</td>
                        </tr>
                        <tr>
                            <td>Ruby</td>
                            <td>Time.local(<u>year</u>, <u>month</u>, <u>day</u>, <u>hour</u>, <u>minute</u>, <u>second</u>)</td>
                        </tr>
                        <tr>
                            <td>SQL Server</td>
                            <td>SELECT DATEDIFF(s, '1970-01-01 00:00:00', <u>time</u>)</td>
                        </tr>
                        <tr>
                            <td>Unix / Linux</td>
                            <td>date +%s -d"Jan 1, 1970 00:00:01"</td>
                        </tr>
                        <tr>
                            <td>VBScript / ASP</td>
                            <td>DateDiff("s", "01/01/1970 00:00:00", <u>time</u>)</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        <div class="recommend-box">
            {include file='pc/common/app'}
        </div>

    </div>
</div>

{/block}

{block name="script"}
<script>
    let timer = null;
    require(['vue'], (Vue) => {
        new Vue({
            el: '#app',
            data: {
                currentYear: null,
                currentMonth: null,
                currentDay: null,
                currentHour: null,
                currentMinute: null,
                currentSecond: null,
                currentUnixTime: null,

                setTimeStr: null,
                setTimestamp: null,

                getDateTimeStr: null,
                getTimestamp: null,
                getTimestamp2: null,
            },
            mounted() {
                this.getCurrentTime();
            },
            methods: {
                change1() {
                    this.getDateTimeStr = this.timeStamp2Date(this.setTimestamp);
                },
                change2() {
                    this.getTimestamp = this.date2TimeStamp(this.setTimeStr);
                },
                change3() {
                    let dataTimeStr = this.currentYear + '/' + this.currentMonth + '/' + this.currentDay + " " + this.currentHour + ':' + this.currentMinute + ':' + this.currentSecond;
                    this.getTimestamp2 = this.date2TimeStamp(dataTimeStr);
                },
                date2TimeStamp(dateStr) {
                    dateStr = dateStr.replace(/\//g, '-');
                    let specifiedTime = new Date(dateStr);
                    return Math.floor(specifiedTime.getTime() / 1000);
                },
                timeStamp2Date(timestamp) {
                    let date = new Date(timestamp * 1000);
                    let year = date.getFullYear();
                    let month = ("0" + (date.getMonth() + 1)).slice(-2);
                    let day = ("0" + date.getDate()).slice(-2);
                    let hour = ("0" + date.getHours()).slice(-2);
                    let minute = ("0" + date.getMinutes()).slice(-2);
                    let second = ("0" + date.getSeconds()).slice(-2);
                    return year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;
                },

                getCurrentTime() {
                    let now = new Date();

                    let year = now.getFullYear(); // 获取当前年份
                    let month = now.getMonth() + 1; // 获取当前月份（注意：月份是从0开始计算的，所以需要加1）
                    let day = now.getDate(); // 获取当前日期
                    let hour = now.getHours(); // 获取当前小时数
                    let minute = now.getMinutes(); // 获取当前分钟数
                    let second = now.getSeconds(); // 获取当前秒数
                    let timestamp = Math.floor(now.getTime() / 1000); // 获取时间戳

                    // console.log(year, month, day, hour, minute, second, timestamp);

                    this.currentYear = year;
                    this.currentMonth = month >= 10 ? month : '0' + month;
                    this.currentDay = day >= 10 ? day : '0' + day;
                    this.currentHour = hour >= 10 ? hour : '0' + hour;
                    this.currentMinute = minute >= 10 ? minute : '0' + minute;
                    this.currentSecond = second >= 10 ? second : '0' + second;
                    this.currentUnixTime = timestamp;

                    this.setTimestamp = timestamp;
                    this.setTimeStr = this.currentYear + '/' + this.currentMonth + '/' + this.currentDay + " " + this.currentHour + ':' + this.currentMinute + ':' + this.currentSecond;

                    this.getDateTimeStr = this.setTimeStr;
                    this.getTimestamp = this.setTimestamp;
                    this.getTimestamp2 = this.setTimestamp;

                    this.startTimer()
                },

                // 实时更新时间戳 start
                startTimer() {
                    this.updateTimer();

                    let count = 0;
                    timer = setInterval(() => {
                        count++;
                        if (count > 100) {
                            this.stopTimer();
                            this.startTimer();
                        }
                        this.updateTimer();
                    }, 1000);
                },
                stopTimer() {
                    clearTimeout(timer);
                },
                updateTimer() {
                    let now = new Date();
                    this.currentUnixTime = Math.floor(now.getTime() / 1000); // 获取时间戳
                }
                // 实时更新时间戳 start

            }
        })
    });
</script>
{/block}